/**
 * Created by GUO on 2017/5/19.
 * @flow
 */

import React from 'react';
import {
    View,
    Text,
} from 'react-native';

import { StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
import PostsScreen from  './posts/PostsScreen';
import PostDetailScreen from  './posts/PostDetailScreen';
import RssScreen from  './rss/RssScreen';
import TopicScreen from  './topic/TopicScreen';
import WeeklyScreen from  './weekly/WeeklyScreen';
import UserScreen from  './user/UserScreen';
import CardStackStyleInterpolator from '../node_modules/react-navigation/src/views/CardStackStyleInterpolator';

class App extends React.PureComponent{

    render(){
        return (
            <View style = {{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text>Hello App</Text>
            </View>
        );
    }
}

//======config TabNavigator======

const tabNavigatorRouteConfigs = {
    posts: {screen: PostsScreen},
    rss: {screen: RssScreen},
    topic: {screen: TopicScreen},
    weekly: {screen: WeeklyScreen},
    user: {screen: UserScreen},
};

const tabNavigatorConfig = {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
    swipeEnabled: false,
    animationEnabled:false,
    tabBarOptions: {
        activeTintColor: '#0AA284',
        showLabel: false
    }
};

const MainScreen = TabNavigator(tabNavigatorRouteConfigs,tabNavigatorConfig);


//======config StackNavigator======

const stackNavigatorRouteConfigs = {
    main: {screen: MainScreen},
    postDetail: {screen: PostDetailScreen},
};

const stackNavigatorConfig = {
    // transitionConfig:()=> ({screenInterpolator: CardStackStyleInterpolator.forHorizontal}),
    cardStyle: {
        backgroundColor:'#F2F4F7'
    },
    headerMode:'screen',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#0AA284',
            elevation:0
        },
        headerTintColor: 'white',
    }
};

export default StackNavigator(stackNavigatorRouteConfigs,stackNavigatorConfig);